﻿{% extends base %}
{% block body %}
<script src="/static/lib/vue/vue-2.2.6.min.js"></script>
<link rel="stylesheet" href="/static/css/timeline.css"/>

<div id="app" class="card content">
  <h3 class="card-title"><a href="/note/tools" class="link2">返回上级</a>&nbsp;/&nbsp;时光轴</h3>
  <article v-for="item in itemList">
    <h3>{{!item.title}}</h3>
    <section v-for="file in item.files">
      <span class="point-time point-green"></span>
      <time datetime="">
        <span>{{!item.ctime}}</span>
      </time>
      <aside>
        <p class="things"><a v-bind:href="file.url">{{!file.name}}</a></p>
        <p class="brief"><span class="text-green"></span></p>
      </aside>
    </section>
  </article>
</div>

<header class="site-footer card">
  <div class="wrapper">
    <a id="loadMore" href="javascript:void(0)">加载更多</a>
  </div>
</header>

<script type="text/javascript">
  // 全局变量
  var QUERY_LIMIT = 100;

    var itemList = {
        "2016": []
    }

    var list = [
        {"title": "1977 Aug. 20", "description": "Voyager 2 launched from Kennedy Space Flight Center"},
        {"title": "2017 Mar. 17", "description": "This is a test"}
    ]

    function customWayPoint(className, addClassName, customOffset) {
        var waypoints = $(className).waypoint({
            handler: function (direction) {
                if (direction == "down") {
                    $(className).addClass(addClassName);
                } else {
                    $(className).removeClass(addClassName);
                }
            },
            offset: customOffset
        });
    }

    var defaultOffset = '50%';

    for (i = 0; i < itemList.length; i++) {
        customWayPoint('.timeline__item--' + i, 'timeline__item-bg', defaultOffset);
    }

    var app = new Vue({
        el: "#app",
        data: {
            itemList: itemList
        }
    });

    app.itemList = [];
    window.offset = 0;

    function mergeFiles(list, key, files) {
      for (var i = 0; i < list.length; i++) {
        var item = list[i];
        if (item.title == key) {
          item.files = item.files.concat(files);
          return;
        }
      }
      list.push({title: key, files: files});
    }

    function loadMore() {
      var type = getUrlParam("type");
      $.get("/note/timeline?_type=json&type=" + type, 
        { 
          offset: window.offset,
          limit : QUERY_LIMIT
        }, 
        function (data, status) {
          if (data == "{}") {
            alert("没有更多了");
            return;
          }
          var resp = data;
          // app.itemList = [];
          var count = 0;
          for (var key in resp) {
            console.log(key, resp[key]);
            var files = resp[key];
            window.offset += files.length;
            mergeFiles(app.itemList, key, files);
            count++;
            // app.itemList.push({title: key, files: files});
          }
          if (count == 0) {
            alert("没有更多了");
            return;
          }
          
          app.itemList.sort(function (a, b) {
            if (a.title < b.title) {
              return 1;
            }
            if (a.title > b.title) {
              return -1;
            }
            return 0;
          });
      });
    }


    $("#loadMore").on("click", function() {
      loadMore();
    })

    loadMore();

</script>
{% end %}

{% block aside %}
  {% include note/mod_aside.html %}
{% end %}
